import React from 'react';
import {Row, Col} from 'antd';
import './index.less';
import Util from '../../utils/utils'
import axios from '../../axios'
import {connect} from 'react-redux';

class Header extends React.Component {

    componentWillMount() {
        this.setState({
            userName : 'Hyyqc'
        });
        setInterval(() => {
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        },1000);
        this.getWeatherAPIData();
    }

    // 防止内存泄漏
    componentWillUnmount() {
        this.setState = (state,callback) => {
            return;
        }
    }

    getWeatherAPIData(){
        let city = '绍兴';
        axios.jsonp({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location='+encodeURIComponent(city)+'&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then(res => {
            if(res.status === 'success') {
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl:data.dayPictureUrl,
                    weather:data.weather
                })
            }
        })
    }



    render() {
        const menuType = this.props.menuType;
        return (
            <div className="header">
                <Row className="header-top">
                    {
                      menuType ? <Col span={6} className="SecondLogo">
                          <img src="/logo.svg" alt="这是一张图片"/>
                          <span>共享单车管理系统</span>
                      </Col> : ""
                    }
                    <Col span={menuType? 18 : 24}>
                        <span>欢迎,{this.state.userName}</span>
                        <a href="https://github.com/hyyqcweb">退出</a>
                    </Col>
                    
                </Row>
                {
                    menuType ? "" : <Row className="breadCrumb">
                        <Col span={4} className="breadCrumb-title">
                            {this.props.menuName}
                        </Col>
                        <Col span={20} className="weather">
                            <span className="date">{this.state.sysTime}</span>
                            <span className="weather-img">
                            <img src={this.state.dayPictureUrl} alt=""/>

                        </span>
                            <span className="weather-detail">
                            {this.state.weather}
                        </span>
                        </Col>
                    </Row>
                }

            </div>
        )
    }
}
const mapStateToProps = state => {
    if(state === undefined) return {};
  return {
        menuName: state.menuName
  }
};
export default connect(mapStateToProps)(Header)
